
<template>
	<el-table ref="table" :data="columnData" row-key="prop" style="width: 100%" border>
		<el-table-column prop="" label="排序" width="60">
			<el-tag class="move" style="cursor: move;">
				<sc-icon style="cursor: move;" name="sc-expand-up-down-fill" />
			</el-tag>
		</el-table-column>
		<el-table-column prop="label" label="列名">
			<template #default="scope">
				<el-tag round :effect="scope.row.hide ? 'light' : 'dark'" :type="scope.row.hide ? 'info' : ''">
					{{ scope.row.label }}
				</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="hide" label="显示" width="60">
			<template #default="scope">
				<el-switch v-model="scope.row.hide" size="small" :active-value="false" :inactive-value="true" />
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import Sortable from 'sortablejs'

export default {
	emits: ['success'],
	props: {
		column: { type: Array, default: () => [] }
	},
	data() {
		return {
			columnData: this.column
		}
	},
	mounted() {
		this.rowDrop()
	},
	methods: {
		rowDrop() {
			const _this = this
			const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
			Sortable.create(tbody, {
				handle: ".move",
				animation: 200,
				ghostClass: "ghost",
				onEnd({ newIndex, oldIndex }) {
					const tableData = _this.columnData
					const currRow = tableData.splice(oldIndex, 1)[0]
					tableData.splice(newIndex, 0, currRow)
				}
			})
		}
	}
}
</script>
